<!--  -->
<template>
  <div class="container">
    <h2>横屏切换</h2>
    <div class="slide-wrapper horizontal" ref="horizontalSlide">
      <div class="slide-content">
        <div class="slide-item" v-for="item of nums" :key="item">
          banner-{{ item }}
        </div>
      </div>
      <div class="dots-wrapper">
        <span
          class="dot"
          v-for="num in nums"
          :key="num"
          :class="{ active: horizontalCurIdx === num - 1 }"
        ></span>
      </div>
    </div>
    <div class="btn-wrap">
      <button class="prev" @click="prePage">prePage</button>
      <button class="next" @click="nextPage">nextPage</button>
    </div>

    <h2>竖屏切换</h2>
    <div class="slide-wrapper vertical" ref="verticalSlide">
      <div class="slide-content">
        <div class="slide-item" v-for="item of nums" :key="item">
            <div>page-{{ item }}</div>                     
        </div>
      </div>
      <div class="dots-wrapper">
        <span
          class="dot"
          v-for="num in nums"
          :key="num"
          :class="{ active: verticalCurIdx === num - 1 }"
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "@better-scroll/core";
import Slide from "@better-scroll/slide";

BScroll.use(Slide);

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      nums: 4,
      horizontalCurIdx: 0,
      verticalCurIdx: 0,
    };
  },
  //方法集合
  methods: {
    slideHorizontalInit() {
      this.slideHorizontal = new BScroll(this.$refs.horizontalSlide, {
        scrollX: true,
        scrollY: false,
        slide: true,
        momentum: false,
        bounce: false,
        probeType: 3,
      });
      this.slideHorizontal.on("slideWillChange", ({ pageX }) => {
        console.log(pageX);
        this.horizontalCurIdx = pageX;
      });
      this.slideHorizontal.on("slidePageChanged", (page) => {
        console.log(page);
      });
    },
    prePage() {
      this.slideHorizontal.prev();
    },
    nextPage() {
      this.slideHorizontal.next();
    },
    slideVerticalInit() {
      this.slideVertical = new BScroll(this.$refs.verticalSlide, {
        scrollX: false,
        scrollY: true,
        slide: true,
        momentum: false,
        bounce: false,
        probeType: 3,
      });
      this.slideVertical.on("slideWillChange", ({ pageY }) => {
        console.log(pageY);
        this.verticalCurIdx = pageY;
      });
      this.slideVertical.on("slidePageChanged", (page) => {
        console.log(page);
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.slideHorizontalInit();
    this.slideVerticalInit()
  },
  beforeDestroy() {
    this.slideHorizontal.destroy();
    this.slideVertical.destroy()
  }, //生命周期 - 销毁之前
};
</script>
<style lang='scss' scoped>
.container {
  padding-top: 60px;
  h2 {
    padding: 0 20px;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .slide-wrapper {
    width: 100vw;
    position: relative;
    overflow: hidden;
    .slide-content {
      height: 100%;
      display: flex;
    }
    .dots-wrapper {
      position: absolute;
      .dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #eee;
        transition: 0.275s;
        &.active {
          border-radius: 20px;
        }
      }
    }
    &.horizontal {
      height: 160px;
      .dots-wrapper {
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
        .dot {
          margin: 0 3px;
          &.active {
            width: 20px;
          }
        }
      }
      .slide-content {
        flex-wrap: wrap;
      }
    }
    &.vertical {
      height: 260px;
      .dots-wrapper {
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        display: flex;
        flex-flow: column wrap;
        .dot {
          margin: 3px 0;
          &.active {
            height: 20px;
          }
        }
      }
      .slide-content {
        flex-flow: column wrap;
        .slide-item {
          height: 260px;
        }
      }
    }
    .slide-item {
      width: 100vw;
      background-color: rgb(90, 173, 221);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      &:nth-child(2) {
        background-color: rgb(23, 156, 29);
      }
      &:nth-child(3) {
        background-color: rgb(143, 156, 23);
      }
      &:nth-child(4) {
        background-color: rgb(190, 62, 22);
      }
    }
  }
}
.btn-wrap {
  display: block;
  text-align: center;
  padding: 10px;
  button {
    margin: 0 5px;
  }
}
</style>